<template>
  <div class="detail2">
    <u-navbar title="个人简历" :background="{ backgroundColor: 'transparent'}" title-color="#000" :border-bottom="false"></u-navbar>
    <div class="top"></div>
    <div class="card">
      <u-form :model="form" ref="uForm" label-width="100px" label-position="top">
        <u-form-item label="头像" label-position="left">
          <div style="display: flex;justify-content: flex-end;width: 100%;position:relative;">
            <u-upload style="width: 200rpx;height: 200rpx;overflow:hidden;" :action="action" max-count="1" :file-list="fileList" @on-success="successFile" @on-remove="removeFile">
              <div slot="addBtn" style="display: flex;align-items: center;justify-content: center;width: 200rpx;height: 200rpx;border-radius: 50%;overflow:hidden;border: 1px solid #f2f2f2;background-color: #f2f2f2">
                <u-icon name="account-fill" size="120" color="#999"></u-icon>
              </div>
            </u-upload>
          </div>
        </u-form-item>
        <u-form-item label="姓名"><u-input v-model="form.nickname" /></u-form-item>
        <u-form-item label="电话"><u-input v-model="form.phone" /></u-form-item>
        <u-form-item label="性别"><u-input type="select" v-model="form.sex" @click="showSex = true"/></u-form-item>
        <u-form-item label="籍贯"><u-input type="select" :auto-height="true" v-model="form.address" @click="showRegion = true"/></u-form-item>
        <u-form-item label="身高"><u-input v-model="form.height" type="digit" /></u-form-item>
        <u-form-item label="生日"><u-input type="select" v-model="form.birthday" @click="showDate = true"/></u-form-item>
        <u-form-item label="自我评价"><u-input type="textarea" :auto-height="true" v-model="form.desc" /></u-form-item>
        <u-form-item label="个人风采">
          <u-upload :action="action" max-count="10" :file-list="fileList2" @on-success="successFile2" @on-remove="removeFile2"></u-upload>
        </u-form-item>
      </u-form>

    </div>
    <div class="footer">
      <div class="button" @click="toSave">保存</div>
      <div class="button" @click="toSubmit">确认</div>
    </div>

    <u-action-sheet :list="sexList" v-model="showSex" @click="sexCallback"></u-action-sheet>
    <u-picker v-model="showDate" mode="time" :default-time="form.birthday || ''" :params="dateParams" @cancel="showDate = false" @confirm="dateCallback"></u-picker>

    <div class="login-box" v-if="show">
      <image class="close" src="/static/resume/close.png" @click="show = false"/>

      <div class="form-item">
        <input type="tel" v-model="loginForm.phone" placeholder="请输入手机号">
      </div>
      <div class="form-item">
        <input type="number" v-model="loginForm.code" placeholder="请输入验证码" />
        <div class="send-btn" @click="getCode">
          {{ tips}}
        </div>
      </div>
      <div class="button primary" @click="toLogin">登录/注册</div>
    </div>
    <div class="login-box" v-if="show2">
      <image class="close" src="/static/resume/close.png" @click="show2 = false"/>
      <div class="form-item">
        <input type="tel" v-model="checkForm.phone" placeholder="请输入手机号">
      </div>
      <div class="form-item">
        <input type="number" v-model="checkForm.code" placeholder="请输入验证码" />
        <div class="send-btn" @click="getCode">
          {{ tips}}
        </div>
      </div>
      <div class="button primary" @click="toLogin2">验证手机号码</div>
    </div>
    <u-picker mode="region" :default-region="form.address_id" v-model="showRegion" @confirm="confirmRegion"></u-picker>


    <u-verification-code
        :seconds="seconds"
        @end="end" @start="start" ref="uCode"
        @change="codeChange">
    </u-verification-code>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: "index",
  data() {
    return {
      phone: '',
      form: {
        id: undefined,
        nickname: '',
        avatar_url: '',
        phone: '',
        sex: '',
        address: '',
        address_id: [],
        height: '',
        birthday: '',
        desc: '',
        images: []
      },
      checkForm: {
        phone: ''
      },
      action: this.$baseUrl + '/api/upload/file',
      fileList: [],
      fileList2: [],
      sexList: [
        {
          text: '男'
        },
        {
          text: '女'
        },
      ],
      showSex: false,
      showRegion: false,
      showDate: false,
      dateParams: {
        year: true,
        month: true,
        day: true,
      },
      defaultDate: [],
      show: false,
      loginForm: {
        phone: '',
        code: '',
        password: ''
      },
      tips: '',
      seconds: 60,
      post_id: '',
      postDetail: {},
      show2: false
    }
  },
  onLoad({ id }) {
    if (!id) {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
    } else {
      this.post_id = id
      this.$api.getPostDetail({
        id
      }).then(res => {
        this.postDetail = res
        console.log(res)
      }).catch(() => {
        uni.showToast({
          title: '参数错误',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      })
      // 已登陆
      if (this.userInfo.id && this.userInfo.role === 1) {
        this.$api.getUserInfo({
          id: this.userInfo.id
        }).then(res => {
          this.$store.commit('setUserInfo', res)
          this.updateResume()
        })
      } else {
        this.show = true
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    toDetail() {
      uni.navigateTo({
        url: '/pages/resume/index'
      })
    },
    updateResume() {
      // 根据用户id查询简历
      this.$api.getResumeDetailByUser({
        user_id: this.userInfo.id
      }).then(res2 => {
        if (res2) {
          // 有简历
          this.form = {
            ...res2,
            address_id: (res2.address_id || '').split(',').filter(item => item),
            images: (res2.images || '').split(',').filter(item => item)
          }
          this.fileList = this.form.avatar_url ? [{
            url: this.form.avatar_url
          }] : []
          this.fileList2 = this.form.images.map(item => {
            return {
              url: item
            }
          })
        } else {
          // 将个人信息的基础数据赋值给简历
          this.form = {
            nickname: this.userInfo.nickname,
            avatar_url: this.userInfo.avatar_url,
            phone: this.userInfo.phone,
            sex: this.userInfo.sex,
            address: '',
            address_id: [],
            height: '',
            birthday: '',
            desc: '',
            images: []
          }
        }
        this.phone = this.form.phone
      })
    },
    successFile(e) {
      // 上传成功
      this.form.avatar_url = e.data.url
    },
    removeFile() {
      // 删除图片
      this.form.avatar_url = ''
    },
    successFile2(e) {
      // 上传成功
      this.form.images.push(e.data.url)
    },
    removeFile2(e) {
      // 删除图片
      this.form.images.splice(e, 1)
    },
    sexCallback(index) {
      console.log(index)
      this.form.sex = this.sexList[index].text;
    },
    dateCallback(e) {
      console.log(e)
      this.form.birthday =`${e.year}-${e.month}-${e.day}`
    },
    toSave() {
      if (!this.userInfo.id || this.userInfo.role !== 1) {
        this.show = true
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return;
      } else {
        if (!this.form.nickname) {
          uni.showToast({
            title: '请输入姓名',
            icon: 'none'
          })
          return;
        }
        if (!this.form.phone) {
          uni.showToast({
            title: '请输入电话',
            icon: 'none'
          })
          return;
        }
        if (!this.form.sex) {
          uni.showToast({
            title: '请选择性别',
            icon: 'none'
          })
          return;
        }
        if (!this.form.address) {
          uni.showToast({
            title: '请选择籍贯',
            icon: 'none'
          })
          return;
        }
        if (!this.form.height) {
          uni.showToast({
            title: '请输入身高',
            icon: 'none'
          })
          return;
        }
        if (!this.form.birthday) {
          uni.showToast({
            title: '请选择生日',
            icon: 'none'
          })
          return;
        }
        if (!this.form.desc) {
          uni.showToast({
            title: '请输入自我评价',
            icon: 'none'
          })
          return;
        }
        if (!this.form.images.length) {
          uni.showToast({
            title: '请上传个人风采',
            icon: 'none'
          })
          return;
        }
        this.$api.saveResume({
          ...this.form,
          images: this.form.images.join(','),
          address_id: this.form.address_id.join(','),
          user_id: this.userInfo.id
        }).then((res) => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
        })
      }
    },
    toSubmit() {
      if (!this.userInfo.id || this.userInfo.role !== 1) {
        this.show = true
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return;
      } else {

        if (this.phone !== this.form.phone) {
          this.show2 = true
          this.checkForm.phone = this.form.phone
          return;
        }
        if (!this.form.avatar_url) {
          uni.showToast({
            title: '请上传头像',
            icon: 'none'
          })
          return;
        }
        if (!this.form.nickname) {
          uni.showToast({
            title: '请输入姓名',
            icon: 'none'
          })
          return;
        }
        if (!this.form.phone) {
          uni.showToast({
            title: '请输入电话',
            icon: 'none'
          })
          return;
        }
        if (!this.form.sex) {
          uni.showToast({
            title: '请选择性别',
            icon: 'none'
          })
          return;
        }
        if (!this.form.address) {
          uni.showToast({
            title: '请选择籍贯',
            icon: 'none'
          })
          return;
        }
        if (!this.form.height) {
          uni.showToast({
            title: '请输入身高',
            icon: 'none'
          })
          return;
        }
        if (!this.form.birthday) {
          uni.showToast({
            title: '请选择生日',
            icon: 'none'
          })
          return;
        }
        if (!this.form.desc) {
          uni.showToast({
            title: '请输入自我评价',
            icon: 'none'
          })
          return;
        }
        if (!this.form.images.length) {
          uni.showToast({
            title: '请上传个人风采',
            icon: 'none'
          })
          return;
        }
        this.$api.saveResume({
          ...this.form,
          images: this.form.images.join(','),
          address_id: this.form.address_id.join(','),
          user_id: this.userInfo.id
        }).then((res) => {
          this.$api.createPostJoin({
            resume_id: res.id,
            user_id: this.userInfo.id,
            post_id: this.post_id,
            category: this.postDetail.category,
            category_id: this.postDetail.category_id || 0,
            company_user_id: this.postDetail.user_id
          }).then(res => {
            uni.showToast({
              title: '投递成功',
              icon: 'success'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          })
        })
      }
    },
    toLogin2() {
      if (!this.checkForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return;
      }
      if (!this.checkForm.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return;
      }
      uni.showLoading({
        title: '验证中'
      })
      this.$api.updateUser({
        id: this.userInfo.id,
        phone: this.checkForm.phone,
        code: this.checkForm.code
      }).then(res => {
        console.log(res)
        uni.showToast({
          title: '验证成功',
          icon: 'success'
        })
        this.form.phone = this.checkForm.phone
        this.phone = this.checkForm.phone
        this.$store.commit('setUserInfo', res)
        this.show2 = false
      })
    },
    confirmRegion(e) {
      this.form.address = [e.province.label, e.city.label, e.area.label].join('')
      this.form.address_id = [e.province.value, e.city.value, e.area.value]
      console.log('this.form',this.form)
    },
    toLogin() {
      if (!this.loginForm.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return;
      }
      if (!this.loginForm.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return;
      }
      this.$api.login({
        phone: this.loginForm.phone,
        code: this.loginForm.code,
        role: 1
      }).then(res => {
        this.$store.commit('setUserInfo', res)
        this.show = false
        this.updateResume()
      })
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if(this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        this.$api.sendCode({
          phone: this.show2 ? this.checkForm.phone :this.loginForm.phone,
          type: 'login'
        }).then(res => {
          uni.hideLoading()
          this.$refs.uCode.start();
        })
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      this.$u.toast('倒计时结束');
    },
    start() {
      this.$u.toast('倒计时开始');
    },
  }
}
</script>

<style scoped lang="scss">
.detail2 {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 40rpx 24rpx 140rpx 24rpx;
  .login-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 660rpx;
    background-image: url("/static/resume/login_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 99;
    .form-item {
      padding: 0 36rpx;
      background-color: #ffffff;
      color: #000000;
      flex-grow: 1;
      margin:60rpx 0;
      text-align: center;
      line-height: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      padding: 0 60rpx;
      .send-btn  {
        color: #05C8CE;
        font-size: 28rpx;
        flex-shrink: 0;
      }
      input {
        border: none;
        outline: none;
        flex-grow: 1;
        font-size: 28rpx;
        color: #000000;
        text-align: left;
      }
    }
    .button {
      margin: 0;
      height: 100rpx;
      line-height: 100rpx;
      border-radius: 50rpx;
    }
    .close {
      position: absolute;
      right: 56rpx;
      top: 56rpx;
      width: 32rpx;
      height: 32rpx;
    }
    padding: 100rpx 56rpx;
  }
  .footer {
    background-color: #ffffff;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    display: flex;
    align-items: center;
    padding-bottom: 40rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
    left: 0;
    padding-top: 30rpx;
  }
  .button {
    flex: 1;
    margin: 0 30rpx;
    text-align: center;
    line-height: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
  }
  .card {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    overflow: auto;
    .card-header {
      height: 178rpx;
      display: flex;
      align-items: center;
      border: 1rpx solid #DADADA;
      .line {
        width: 8rpx;
        height: 54rpx;
        background-color: #05C8CE;
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }
      .title {
        height: 90rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 64rpx;
        color: #303030;
        line-height: 75rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        flex-grow: 1;
      }
      // 工资
      .salary {
        height: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #05C8CE;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-left: 30rpx;
        margin-right: 30rpx;
      }

    }
    .card-body {
      .item {
        margin: 50rpx;
        .item-title {
          height: 44rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: #303030;
          line-height: 38rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          position: relative;
          margin-bottom: 20rpx;
          .title-icon {
            width: 24rpx;
            height: 24rpx;
            position: absolute;
            left: -6rpx;
            bottom: 0rpx;
          }
        }
      }
      .content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #3D3D3D;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 30rpx;
      }
    }
  }
  .top {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 522rpx;
    background: linear-gradient( 180deg, #05C8CE 0%, rgba(223,254,255,0.5) 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
}
</style>
